<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./bootstrap.css">
	<script src="./moment.js"></script>
	<script src="./vuev2.5.21.js"></script>
	<script src="./vue-resource.js"></script>
</head>
<body>
	<div id="app">
		<div class="panel panel-primary">
			<div class="panel-heading">
				<h3 class="panel-title">添加品牌</h3>
			</div>
			<div class="panel-body form-inline">
				<label>
					Name:
					<input type="text" name="name" id="id" class="form-control" v-model="name" @keyup.enter="add" v-color="'red'">
				</label>
				<input type="button" value="添加" class="btn btn-primay" @click="add()">
				<label>
					搜索名称关键字:
					<input type="text" class="form-control" v-model="keywords" autofocus v-color="'green'">
				</label>
			</div>
		</div>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>id</th>
					<th>Name</th>
					<th>Ctime</th>
					<th>Operation</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in search(keywords)" :key="item.id">
				<!-- <tr v-for="item in list" :key="item.id"></tr> -->
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.ctime | msgFormat}}</td>
					<td>
						<a href="javajscript:''" @click.prevent="del(item.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<script>
		Vue.http.options.root="http://vue.lovegf.cn:8899/";
	  Vue.http.options.emulateJSON = true;
		new Vue({
			el:"#app",
			data:{
				//name:"新年快乐",
				name:"",
				keywords:"",
				list:[
					// {id:1,name:'宝马',ctime: new Date()},
        	// {id:2,name:'奔驰',ctime: new Date()},
				],
			},
			created(){
			 	this.Getlistssss();
			
			},
			methods:{
				Getlistssss(){
					this.$http.get('api/getprodlist').then(result =>{
					//	console.log(result)
						if(result.body.status === 0){
							this.list=result.body.message
						}else{
							console("获取数据失败")
						}
					})
				},
				//添加
				add(){
					this.$http.post('api/addproduct',{name:this.name}).then(res =>{
						//console.log(res)
						if(res.body.status === 0){
							this.Getlistssss();
							this.name=""
						}
					
					})			
				},
				//删除
				del(id){
					this.$http.get('api/delproduct/'+ id).then(res =>{
						this.Getlistssss();
						this.del(++id)
					console.log(++id);
					});
					
				},
				//查询
				search(keywords){
					return	this.list.filter(item => item.name.includes(keywords))
				}
			},
			//自定属性
			directives:{
				'color':(el,binding)=>{
					el.style.color=binding.value
				}
			},
			//替换时间
			filters:{
				msgFormat:(datetimesss)=>{
					return	moment(datetimesss).format('YYYY-MM-DD  HH:mm:ss ');
				}
			}
		})
	</script>
</body>

</html>